<template>
  <!--列表 横向卡片 组件-->
  <div class="listItem" v-if="TalentList">
    <RouterLink to class="linkBox">
      <div class="itemImg">
        <img
          v-lazy="TalentList.user_avatar"
          alt="sds"
          v-if="TalentList.user_avatar"
        />
        <img src="../assets/images/cat.png" v-else />
      </div>
      <div class="itemTiter">
        <p>
          <!--          昵称:-->
          <strong>{{ TalentList.user_name }}</strong>
        </p>
        <div class="itemTiterButton">
          <p>
            <strong>show值:</strong>
            <span>{{ TalentList.user_integral }}</span>
          </p>
          <p>
            <strong>性别:</strong>
            <span>{{ TalentList.user_gender }}</span>
            <svg class="nannv_icon" aria-hidden="true">
              <use
                :xlink:href="
                  TalentList.user_gender == '女'
                    ? '#icon-nannv'
                    : '#icon-nannv-copy'
                "
              ></use>
            </svg>
          </p>
        </div>
        <p>
          <span>简介:</span
          >{{ TalentList.user_intro ? TalentList.user_intro : "神秘得家伙~" }}
        </p>
      </div>
    </RouterLink>
    <!--段位-->
    <Dan class="expertDan" :integral="TalentList.user_integral" />
  </div>
</template>

<script>
import Dan from "@/components/Dan";
export default {
  name: "ListItemAcross",
  props: ["TalentList"],
  components: { Dan },
};
</script>

<style scoped lang="less">
.listItem {
  //border: 1px solid blue;
  box-sizing: border-box;
  //width: 46%;
  width: 100%;
  //height: 4rem;
  padding-left: 1rem;
  position: relative;
  background-image: url("../assets/images/backImg (2).jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0px -40px;
  .expertDan {
    position: absolute;
    top: 0.5rem;
    right: 0.7rem;
    width: 1rem;
    height: 1rem;
    //border: 1px solid red;
  }
  .itemImg {
    width: 4rem;
    height: 4rem;
    border-radius: 20%;
    text-align: center;
    overflow: hidden;
    border: 1px solid #fcd994;
    img {
      height: 100%;
      max-width: 100%;
    }
  }
  .itemTiter {
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    //position: absolute;
    padding: 0.6rem 0;
    margin-left: 0.2rem;
    box-sizing: border-box;
    p {
      width: 100%;
      margin: 0;
      color: #5f5f5f;
      font-size: 0.75rem;
      text-align: center;
      padding: 0;
      box-sizing: border-box;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      strong {
        color: #e29a51;
        font-size: 0.8rem;
        white-space: nowrap;
      }
      &:nth-last-child(1) {
        color: #908e8e;
        text-align: left;
        padding-left: 1.11rem;
      }
    }
    .itemTiterButton {
      display: flex;
      //flex-direction: column;
      line-height: 2;
      p {
        width: 100%;
        margin: 0;
        color: #5f5f5f;
        font-size: 0.7rem;
        //padding: 0 0.5rem;
        box-sizing: border-box;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        strong {
          font-weight: lighter;
          color: #a35944;
          white-space: nowrap;
        }
        span {
          color: #39a9ed;
        }
      }
    }
  }
}
.linkBox {
  display: flex;
  //justify-content: space-evenly;
  align-items: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.nannv_icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  margin: 0 0 0.2rem 0.3rem;
  overflow: hidden;
}
</style>
